<template>
  <div>
    <div style="position:relative;">
      <div :style="{height:n_he+n_top+'px'}">
        
        <img
          src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi81YjM5M2ZkNzE1NjI2ZjQ2NTg5ZjZkNzA5YTYxOTQ4Zi05MC53ZWJw.webp"
          style="width:100%;"
        />
      </div>
      <div
        style="width:100%; height:100%;background:rgba(0,0,0,.3);position:absolute; left:0;top:0; padding-top:150px;box-sizing: border-box;"
      >
        <h2 style="font-size:48px;color:#fff; padding-top:38px;text-align:center;">关于我们</h2>
        <p style="font-size:18px; color:#fff; padding:22px 0px;text-align:center;">ABOUT US</p>
        <div style="background:#fff; width:100%;padding-top:80px;" ref="aa">
          <div style="width:80%;margin:auto; overflow: hidden;padding-bottom:50px;">
            <div style="width:70%;float:left;">
              <p style="font-size:22px;color:#595959;">
                关于我们 /
                <span style="font-size:16px;clor:#a9a9a9;">ABOUT</span>
              </p>
              <div style="padding:20px 20px 0px 0px;font-size:13px;color:#a9a9a9;">
                当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HMLT5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。迄今为止，起飞页用户的最短建站时间纪录为30分钟。起飞页的核心竞争力来自于它集流线式布局方案与可视化内容编辑于一体，支持打字传图、自由拖拽，不需要专业编写代码，也没有其他建站工具的层叠式烦恼，您可以随心所欲创建区块、添加组件…
                <br />
                <br />起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。
              </div>
            </div>
            <div style="width:30%;float:right; padding:50px 0px 0px 0px; box-sizing: border-box">
              <img
                src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMS9iMjY2MTUyNTZhY2NlMjk4ZTg1ODQwNWU3OWQ5Nzc3MS05MC53ZWJw.webp"
                style="width:100%"
              />
            </div>
          </div>
          <div style="width:100%;background:#f9f9f9; padding:50px 0px;">
              <div style="width:80%;margin:auto; overflow: hidden;">
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple" style="padding:20px; box-sizing: border-box;">
                  <div
                    style="width:100%; background:#fff;border:1px solid #ccc;;padding:20px; box-sizing: border-box;"
                  >
                    <div
                      style="width: 32px;height: 32px;border: 1px solid #51bce6; border-radius: 50%;margin: auto;text-align: center;line-height:32px; color:#51bce6;"
                    >
                      <span class="el-icon-location-information"></span>
                    </div>
                    <h2 style="padding:20px 0px;text-align: center">
                      <span style="color:#E04F67;">+120</span> 高端旅游
                    </h2>
                    <p
                      style="padding:20px 0px; font-size:12px;color:#808080;"
                    >当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事</p>
                    <div style="text-align: center">
                      <span
                        style=" display: inline-block;padding: 0px 30px;border: 1px solid #ccc;line-height: 22px;"
                      >了解详情</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div
                  class="grid-content bg-purple-light"
                  style="padding:20px; box-sizing: border-box;"
                >
                  <div
                    style="width:100%; background:#fff;border:1px solid #ccc;;padding:20px; box-sizing: border-box;"
                  >
                    <div
                      style="width: 32px;height: 32px;border: 1px solid #51bce6; border-radius: 50%;margin: auto;text-align: center;line-height:32px; color:#51bce6;"
                    >
                      <span class="el-icon-s-custom"></span>
                    </div>
                    <h2 style="padding:20px 0px;text-align: center">
                      <span style="color:#E04F67;">+120</span> 高端旅游
                    </h2>
                    <p
                      style="padding:20px 0px; font-size:12px;color:#808080;"
                    >当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事</p>
                    <div style="text-align: center">
                      <span
                        style=" display: inline-block;padding: 0px 30px;border: 1px solid #ccc;line-height: 22px;"
                      >了解详情</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple" style="padding:20px; box-sizing: border-box;">
                  <div
                    style="width:100%; background:#fff;border:1px solid #ccc;;padding:20px; box-sizing: border-box;"
                  >
                    <div
                      style="width: 32px;height: 32px;border: 1px solid #51bce6; border-radius: 50%;margin: auto;text-align: center;line-height:32px; color:#51bce6;"
                    >
                      <span class="el-icon-s-check"></span>
                    </div>
                    <h2 style="padding:20px 0px;text-align: center">
                      <span style="color:#E04F67;">+120</span> 高端旅游
                    </h2>
                    <p
                      style="padding:20px 0px; font-size:12px;color:#808080;"
                    >当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事</p>
                    <div style="text-align: center">
                      <span
                        style=" display: inline-block;padding: 0px 30px;border: 1px solid #ccc;line-height: 22px;"
                      >了解详情</span>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            n_he:'',
            n_top:''
        }
    },
    mounted() {
    // this.$nextTick(() => {
    this.n_he = this.$refs.aa.offsetHeight;
    this.n_top = this.$refs.aa.offsetTop;
    //   console.log(this.$refs.sa)
    // });
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>